<template>
    <div class="copy-move-node" v-show="currentComponent" :style="copyStyle">
        <component :is="currentComponent"></component>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'

interface CopyMoveNodeProp extends StoreState.componetInfo {
    x: number; // 横坐标位置
    y: number; // 纵坐标位置
}
function getNumber(val: string | null | undefined): number {
    if (val) {
        return parseInt(val)
    } else {
        return 0
    }
}
interface copynodeInfo {
    x: number;
    y: number;
    width: number;
    height: number;
}
interface containerPosition {
    x1y1: StoreState.xy;
    x1y2: StoreState.xy;
    x2y1: StoreState.xy;
    x2y2: StoreState.xy;
}
/**
 * 判断传入节点的位置是否在容器区域内
*/
function isOnContainer(copynodeInfo: copynodeInfo, containerPosition: containerPosition): boolean {
    if (copynodeInfo.x + copynodeInfo.width < containerPosition.x1y1.x || copynodeInfo.y + copynodeInfo.height < containerPosition.x1y1.y) {
        return false
    }
    if (copynodeInfo.x + copynodeInfo.width < containerPosition.x1y2.x || copynodeInfo.y > containerPosition.x1y2.y) {
        return false
    }
    if (copynodeInfo.x > containerPosition.x2y1.x || copynodeInfo.y + copynodeInfo.height < containerPosition.x2y1.y) {
        return false
    }
    if (copynodeInfo.x > containerPosition.x2y2.x || copynodeInfo.y > containerPosition.x2y2.y) {
        return false
    }
    return true
}
@Component
export default class CopyMoveNode extends Vue {

    x: number = 0
    y: number = 0
    width: number = 0
    height: number = 0
    headerToolsHeight: number = this.$store.state.headerToolsHeight
    CopyMoveNodePropData: CopyMoveNodeProp | null = null

    get currentComponent(): string {
        return this.$store.state.currentComponent
    }
    get left() {
        return this.x
    }
    get top() {
        return this.y
    }
    set left(val) {
        this.x = val
    }
    set top(val) {
        this.y = val
    }
    get copyStyle() {
        let style = {left: this.left + 'px', top: this.top + 'px'}
        if (this.CopyMoveNodePropData) {
            return Object.assign(style, this.CopyMoveNodePropData!.style)
        } else {
            return style
        }
    }
    @Watch('$store.state.CopyMoveNodeProp')
    CopyMoveNodeProp() {
        if (this.$store.state.CopyMoveNodeProp) {
            this.CopyMoveNodePropData = this.$store.state.CopyMoveNodeProp
            this.x = this.$store.state.CopyMoveNodeProp.x - (getNumber(this.CopyMoveNodePropData!.style.width) / 2)
            this.y = this.$store.state.CopyMoveNodeProp.y - (getNumber(this.CopyMoveNodePropData!.style.height) / 2) - this.headerToolsHeight
            this.width = getNumber(this.CopyMoveNodePropData!.style.width)
            this.height = getNumber(this.CopyMoveNodePropData!.style.height)
        }
    }
    @Watch('$store.state.nodeMoveing')
    moveing(val: boolean, oldVal:boolean) {
        if (val) {
            // 组件处于移动状态
            document.body.addEventListener('mousemove', this.onmousemove)
        } else {
            // 组件被放置
            const ISONCONTAINER = isOnContainer({
                    x: this.x, 
                    y: this.y,
                    width: this.width,
                    height: this.height
                },
                this.$store.state.workspaceArea
            ) // 正在拖动的组件是否位于容器区域内
            if (ISONCONTAINER) {
                // deep clone对象，放置引用类型传递
                let CopyMoveNodePropData = JSON.parse(JSON.stringify(this.CopyMoveNodePropData))
                let componetInfo = this.CopyMoveNodePropData
                    componetInfo!.style = Object.assign(CopyMoveNodePropData!.style, {
                        left: this.x - this.$store.state.workspaceArea.x1y1.x + 'px',
                        top: this.y - this.$store.state.workspaceArea.x1y1.y + 'px'
                    })
                this.$store.commit('ADD_component_byPageId', {
                    pageId: this.$store.state.currentPageId,
                    componetInfo
                })
            }
            document.body.removeEventListener('mousemove', this.onmousemove)
            this.CopyMoveNodePropData = null
            this.left = 0
            this.top = 0
        }
    }
    onmousemove(event: MouseEvent) {
        this.left = event.clientX - (getNumber(this.CopyMoveNodePropData!.style.width) / 2)
        this.top = event.clientY - (getNumber(this.CopyMoveNodePropData!.style.height) / 2) - this.headerToolsHeight
    }
}  
</script>

<style lang="less">
.copy-move-node {
    position: absolute;
    z-index: 999;
}
</style>
